<template>
		<view style="border-bottom-left-radius: 20rpx; border-bottom-right-radius: 20rpx;">
			<view class="s_list" v-for="(item, index) in sort_json" :key="index"
				:style="{'height': item.list.length<=11? (Math.ceil((item.list.length)/4))*160+'rpx' :item.style_height.height}">
				<view class="s_title">{{item.name}}</view>
				<view class="s_content">
					<view v-for="(child, kk) in item.list" :key="kk" @click="handleClick(item,kk)"
						class="s_content_child" :class="kk==11&&item.status==1?'down':''">{{child.title}}</view>
				</view>

			</view>
		</view>
</template>

<script>
	export default {

		data() {
			return {

				sort_json: [{
						name: '排序依据',
						status: 1,
						style_height: {
							height: '290rpx'
						},
						list: [{
							'title': '距离最近',
							'key': 1
						}, {
							'title': '最新发布',
							'key': 2
						}, {
							'title': '播放热度',
							'key': 3
						}, {
							'title': '报名热度',
							'key': 4
						}]
					},
					{
						name: '发布来源',
						status: 1,
						style_height: {
							height: '290rpx'
						},
						list: [{
							'title': '不限',
							'key': 1
						}, {
							'title': '九街青年...',
							'key': 2
						}, {
							'title': '建北夜校',
							'key': 3
						}, {
							'title': '建北夜校1',
							'key': 4
						}, {
							'title': '建北夜校2',
							'key': 5
						}, {
							'title': '建北夜校3',
							'key': 5
						}, {
							'title': '建北夜校4',
							'key': 5
						}, {
							'title': '建北夜校5',
							'key': 5
						}, {
							'title': '建北夜校6',
							'key': 5
						}, {
							'title': '建北夜校7',
							'key': 5
						}, {
							'title': '建北夜校8',
							'key': 5
						}, {
							'title': '^',
							'key': 5
						}, {
							'title': '建北夜校9',
							'key': 5
						}, {
							'title': '建北夜校10',
							'key': 5
						}, {
							'title': '建北夜校11',
							'key': 5
						}, {
							'title': '建北夜校12',
							'key': 5
						}, {
							'title': '建北夜校13',
							'key': 5
						}, {
							'title': '建北夜校14',
							'key': 5
						}, {
							'title': '建北夜校15',
							'key': 5
						}, {
							'title': '建北夜校16',
							'key': 5
						}, {
							'title': '建北夜校17',
							'key': 5
						}]
					},
					{
						name: '内容分类',
						status: 1,
						style_height: {
							height: '290rpx'
						},
						list: [{
							'title': '不限',
							'key': 1
						}, {
							'title': '琴棋书画',
							'key': 2
						}, {
							'title': '美食厨艺',
							'key': 3
						}, {
							'title': '美食厨艺1',
							'key': 3
						}, {
							'title': '美食厨艺2',
							'key': 3
						}, {
							'title': '美食厨艺3',
							'key': 3
						}, {
							'title': '美食厨艺4',
							'key': 3
						}, {
							'title': '美食厨艺5',
							'key': 3
						}, {
							'title': '美食厨艺6',
							'key': 3
						}, {
							'title': '美食厨艺7',
							'key': 3
						}, {
							'title': '美食厨艺8',
							'key': 3
						}, {
							'title': '^',
							'key': 5
						}, {
							'title': '美食厨艺9',
							'key': 3
						}, {
							'title': '美食厨艺10',
							'key': 3
						}, {
							'title': '美食厨艺11',
							'key': 3
						}]
					}
				]
			}
		},

		onLoad() {

		},

		onShow() {

		},
		onReady() {

		},
		onPageScroll(e) {

		},
		methods: {
			//折叠
			foldOption(item, kk) {
				let newHeight = '290rpx';
				item.list.splice(11, 0, {
					'title': '^',
					'key': 2
				})
				item.list.pop();
				this.$set(item, 'style_height', {
					...item.style_height,
					height: newHeight
				});
				item.status = 1;
			},
			expandOption(item, kk) {
				item.list.splice(kk, 1)
				item.list.push({
					'title': '收起',
					'key': 2
				})
				let newHeight = (Math.ceil((item.list.length) / 4)) * 105 + 'rpx';
				this.$set(item, 'style_height', {
					...item.style_height,
					height: newHeight
				});
				item.status = 0
			},
			handleClick(item, kk) {
				if (item.status == 0) {
					this.foldOption(item, kk);
				} else {
					this.expandOption(item, kk)
				}
			},
		},


	}
</script>

<style lang="scss">
	page {
		// background: #000000;

	}

	.s_title {
		margin: 10rpx 23rpx;
		font-size: 26rpx;
		font-weight: 600;
	}

	.s_list {
		height: 160rpx;
		overflow: hidden;
	}

	.s_content {
		height: 100%;
	}

	.s_content_child {
		width: 140rpx;
		background: #EEEEEE;
		border-radius: 26rpx;
		margin: 10rpx 23rpx;
		float: left;
		padding: 20rpx 9rpx;
		font-size: 22rpx;
		color: #000000;
		text-align: center;
		font-weight: 800;
		opacity: 0.9;
	}
	.down{
		transform: rotate(180deg);
	}
</style>